<script type="text/javascript" src="<?=PUBLICO?>graficos/HC2.3.2/js/highcharts.js"></script>

<script>
var chart;
var chart1;

$(document).ready(function() {
	chart = new Highcharts.Chart({
		chart: {
			renderTo: 'graf_status',
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false
		},
		title: {
			text: '<?php echo $graf['1']['titulo'];?>'
		},
		tooltip: {
			formatter: function() {
				return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
			}
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: true
				},
				showInLegend: false
			}
		},
		series: [{
			type: 'pie',			
			data: [<?php $o = ''; foreach($graf['1']['itens'] as $k=>$v){$o .= ',[\''.$k.'\', '.$v.']';}; echo substr($o, 1);?>],
			name: '<?php echo $graf['1']['titulo'];?>'
		}]
	});
	
	
	chart1 = new Highcharts.Chart({
		chart: {
			renderTo: 'graf_area',
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false
		},
		title: {
			text: '<?php echo $graf['2']['titulo'];?>'
		},
		tooltip: {
			formatter: function() {
				return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
			}
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: true
				},
				showInLegend: true
			}
		},
		series: [{
			type: 'bar',			
			data: [<?php $o = ''; foreach($graf['2']['itens'] as $k=>$v){$o .= ',[\''.$k.'\', '.$v.']';}; echo substr($o, 1);?>],
			name: '<?php echo $graf['2']['titulo'];?>'
		}]
	});
	
	// ===========================================================
	chartx = new Highcharts.Chart({
					chart: {
						renderTo: 'graf_teste',
						defaultSeriesType: 'bar'
					},
					title: {
						text: 'Projetos por Área - 2012'
					},
					xAxis: {
						//categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
						categories: [<?php $o = ''; foreach($graf['3']['concluido'] as $k=>$v){$o .= ',\''.$k.'\'';}; echo substr($o, 1);?>]
					},
					yAxis: {
						min: 0,
						title: {
							text: 'Total de Projetos'
						}
					},
					legend: {
						backgroundColor: '#FFFFFF',
						reversed: true
					},
					tooltip: {
						formatter: function() {
							return ''+
								 this.series.name +': '+ this.y +'';
						}
					},
//					plotOptions: {
//						series: {
//							stacking: 'normal'
//						}
//					},
					plotOptions: {
						bar: {
							dataLabels: {
								enabled: true
							}
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: -100,
						y: 100,
						floating: true,
						borderWidth: 1,
						backgroundColor: '#FFFFFF',
						shadow: true
					},
					series: [{
			type: 'bar',			
			data: [<?php $o = ''; foreach($graf['3']['atrasado'] as $k=>$v){$o .= ','.$v.'';}; echo substr($o, 1);?>],
			name: 'Atrazados'
		},{
			type: 'bar',			
			data: [<?php $o = ''; foreach($graf['3']['concluido'] as $k=>$v){$o .= ','.$v.'';}; echo substr($o, 1);?>],
			name: 'Concluídos'
		},{
			type: 'bar',			
			data: [<?php $o = ''; foreach($graf['3']['andamento'] as $k=>$v){$o .= ','.$v.'';}; echo substr($o, 1);?>],
			name: 'em Andamento'
		},{
			type: 'bar',			
			data: [<?php $o = ''; foreach($graf['3']['comatraso'] as $k=>$v){$o .= ','.$v.'';}; echo substr($o, 1);?>],
			name: 'Concluído com atraso'
		},{
			type: 'bar',			
			data: [<?php $o = ''; foreach($graf['3']['niciado'] as $k=>$v){$o .= ','.$v.'';}; echo substr($o, 1);?>],
			name: 'não Iniciado'
		}
		
		]

//				        series: [{
//						name: 'John',
//						data: [5, 3, 4, 7, 2]
//					}, {
//						name: 'Jane',
//						data: [2, 2, 3, 2, 1]
//					}, {
//						name: 'Joe',
//						data: [3, 4, 4, 2, 5]
//					}]
				});
	
	
	
	
});

</script>


<div id="graf_status" style=" float:left; width: 450px; height: 300px;"></div>
<div id="graf_area" style=" float:left; width: 600px; height: 300px;"></div>
<div id="graf_teste" style=" float:left; width: 600px; height: 600px;"></div>